'use client'

import * as React from 'react'

import { indentListItems, unindentListItems } from '@udecode/plate-list'
import { useEditorRef } from '@udecode/plate/react'
import { IndentIcon, OutdentIcon } from 'lucide-react'

import { ToolbarButton } from './toolbar'

export function ListIndentToolbarButton({
  reverse = false,
  ...props
}: React.ComponentProps<typeof ToolbarButton> & {
  reverse?: boolean
}) {
  const editor = useEditorRef()

  return (
    <ToolbarButton
      {...props}
      onClick={() => {
        reverse ? unindentListItems(editor) : indentListItems(editor)
      }}
      tooltip={reverse ? 'Outdent' : 'Indent'}
    >
      {reverse ? <OutdentIcon /> : <IndentIcon />}
    </ToolbarButton>
  )
}
